<template>
  <!-- 韩佳轩 4-3 -->
  <!-- 分类页面 -->
  <div class="pageClassify">
    <template>
      <div class="policy-center-list-li">
        <div class="image-container1">
          <!-- 轮播图 -->
          <el-carousel :interval="4000" type="card" height="370px">
            <el-carousel-item
              v-for="(items, index) in images"
              :key="index"
              @click.native="toMainPage(items)"
              class="con-item"
            >
              <h3 class="medium">
                <img
                  class="carousel-image"
                  style="width: 100%"
                  fit="fit"
                  :src="$imageUrl + '?id=' + items.imageId"
                />
                <div class="text-container">
                  <p
                    style="
                      font-size: 20px;
                      color: #fff;
                      margin: 0;
                      text-align: center;
                    "
                  >
                    {{ items.back }}
                  </p>
                </div>
              </h3>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </template>
    <!-- 分类标签图片 -->
    <div class="mc">
      <el-row>
        <el-col :span="6">
          <img
            src="@/assets/ClassifyImage/7.jpg"
            style="width: 200px; margin-top: 130px"
          />
          <p style="color: white; margin-top: -250px; margin-left: 40px">
            CLASSIFICATION
          </p>
          <p style="font-size: 30px; color: white; margin-left: 80px">
            商<br />品<br />分<br />类<br />
          </p>
        </el-col>
        <el-col :span="18">
          <!-- <ShopsClassify></ShopsClassify> -->
          <div class="classify">
            <!-- 整个图片分类 -->
            <el-row>
              <el-col
                v-for="(item, index) in BigclassifyList"
                :key="index"
                :span="12"
                style="height: 380px"
              >
                <!-- 大类型 -->
                <!-- 图片 -->
                <el-card :body-style="{ padding: '0px' }" class="box-card">
                  <div style="text-align: center" class="image-container">
                    <div class="imgDiv">
                      <img
                        :src="$imageUrl + '?id=' + item.imageId"
                        style="width: 300px; height: 205px"
                        @click="ClassifyList(item.id)"
                      />
                      <span class="overlay">{{ item.back }}</span>
                      <el-button
                        class="button"
                        @click="ClassifyList(item.id)"
                        icon="el-icon-caret-right"
                        >立即查看</el-button
                      >
                    </div>
                    <p
                      style="
                        font-family: STSong;
                        letter-spacing: 10px;
                        margin: 6px 0;
                        text-align: center;
                      "
                    >
                      {{ item.engName }}
                    </p>
                    <p
                      style="
                        font-size: 27px;
                        font-family: STFangsong;
                        margin: 6px 0;
                        text-align: center;
                      "
                    >
                      {{ item.typeName }}
                    </p>
                    <br />
                  </div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
// import ShopsClassify from "@/components/classify/ShopsClassify.vue";
export default {
  name: "pageClassify",
  data() {
    return {
      // 轮播图图片
      images: [
        // { url: require("../../assets/ClassifyImage/youkll.jpg") },
        // { url: require("../../assets/ClassifyImage/naiyou.jpg") },
        // { url: require("../../assets/ClassifyImage/cake.jpg") },
        // { url: require("../../assets/ClassifyImage/hua.jpg") },
        // { url: require("../../assets/ClassifyImage/jiezhi.jpg") },
        // { url: require("../../assets/ClassifyImage/ditan.jpg") },
        // { url: require("../../assets/ClassifyImage/8.jpg") },
        // { url: require("../../assets/ClassifyImage/bao.jpg") },
      ],
      BigclassifyList: [],
    };
  },
  mounted() {
    this.slideShowByTypes();
    this.getBigClassify();
  },
  methods: {
    //全查大分类
    getBigClassify() {
      this.$axios
        .get("/commodity/classify/getBigClassify", {
          // params:{
          //   id:this.id
          // }
        })
        .then((res) => {
          if (res.data.flag) {
            this.BigclassifyList = res.data.data;
          }
        })
        .catch((err) => {
          this.myMessage("error", err);
        });
    },
    //查询轮播图
    slideShowByTypes() {
      this.$axios
        .get("/slideShow/slideShowByTypes")
        .then((res) => {
          if (res.data.flag) {
            this.images = res.data.data;
          } else {
            this.myMessage("error", res.data.data);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //跳转小分类全查页面
    ClassifyList(id) {
      this.$router.push({
        //跳转的地址
        path: "/PageClassifyList",
        query: {
          //id是前端声明的大分类id
          id: id,
        },
      });
    },
    //点击轮播图跳转详情
    toMainPage(data) {
      this.$router.push({
        path: "/PageMain",
        query: { id: data.carouselId },
      });
    },
  },
  //组件
  // components: {
  //   ShopsClassify,
  // },

  myMessage(type, message) {
    this.$message({
      message: message,
      type: type,
    });
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 18px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.box-card {
  width: 50%;
}
/* 轮播图*/
.con-item:hover .text-container {
  display: block;
}
.text-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
}

/**
    鼠标移入hover动画效果
 */
.con-item:hover img {
  transform: scale(1.1);
  transition: all 0.6s ease 0s;
}

/**
    鼠标移开恢复特效
 */
.policy-center-list-li img {
  transition: all 0.4s ease 0s;
}
.policy-center-list-li .text-box {
  transition: all 0.4s ease 0s;
}
/*========================================================*/
/* 图片定位*/
.imgDiv span {
  position: absolute;
  bottom: 0;
}
/* 图片定位*/
.imgDiv {
  position: relative;
}
/* 图片 文字定位*/
.image-container {
  position: relative;
  width: 100%;
}

.overlay {
  font-weight: 600;
  font-size: 20px;
  opacity: 0;
  background-color: rgba(111, 109, 109, 0.5);
  color: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  transition: opacity 0.6s;
}
.button {
  font-weight: 600;
  border-radius: 10px;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  background-color: rgb(57, 201, 115);
  color: #fff;
  border: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
}
.image-container:hover .button {
  opacity: 1;
}
.image-container:hover .overlay {
  opacity: 1;
}

.pageClassify {
  background-color: #fff;
  overflow: hidden;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 500px;
  margin: 0;
}
.el-carousel__item:nth-child(2n) {
  background-color: #beb22b;
}
.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.mc {
  background-color: #fff;
  width: 80%;
  margin: 0 auto;
}
</style>
